<template>
  <h2>我是app组件</h2>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>工作种类：{{ job.type }}</h2>
  <h2>月薪：{{ job.salary }}</h2>
  <h2>测试reactive数据:{{job.a.b.c}}</h2>
  <button @click="changeInfo">修改人信息</button>
</template>

<script>

import {ref, reactive} from "vue";
//ref需要加上 .value reactive不需要 但reactive只能操作对象
export default {
  name: 'App',
  setup() {
    let name = ref('张三')
    let age = ref(18)
    let job = reactive({
      type: '后端工程师',
      salary: '100k',
      a: {
        b: {
          c: 600
        }
      }
    })


    function changeInfo() {
      name.value = '李四'
      age.value = 26
      job.type = '产品经理'
      job.salary = '500k'
      job.a.b.c=999
    }

    return {
      name,
      age,
      changeInfo,
      job
    }
  }
}
</script>

<style>

</style>
